<template>
	<scroll-view class="album_scroll_view" scroll-y @scrolltolower="handerToLower">
		<!-- 轮播图 开始-->
		<view class="album_swiper">
			<swiper autoplay indicator-dots circular>
				<swiper-item v-for="item in banner" :key="item.id">
					<image :src="item.cover"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图 结束-->

		<!--列表开始-->
		<view class="album_list">
			<navigator class="album_item" v-for="item in news" :key="item.id" :url="`/pages/picturebooks/index?id=${item.articleId}`">
				<view class="album_img">
					<image mode="aspectFill" :src="item.cover"></image>
				</view>
				<view class="album_info">
					<view class="album_name">{{item.articleName}}</view>
					<view class="album_btn">
						<view class="shou_number">20</view>
					</view>
				</view>
			</navigator>
		</view>
		<!--列表结束-->
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageSize: 10,
					keywords: "news",
					pageNum: 1
				},
				//轮播图数据
				banner: [],
				//列表数组
				news: [],
				hasMove: true,
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "精美视频"
			})
			this.getList()
		},
		methods: {
			//获取最新数据
			getList() {
				this.request({
					url: this.httpServer + '/v1/app/article/list',
					data: this.params,
				}).then(res => {
					if (res.rows.length === 0) {
						this.hasMove = false;
						return;
					}
					if (this.banner.length === 0) {
						this.banner = res.rows[0].banner;
					}
					this.news = [...this.news, ...res.rows[0].news];
				})
			},
			handerToLower() {
				if (this.hasMove) {
					this.params.pageNum += 1
					this.getList();
				} else {
					uni.showToast({
						title: "没有更多数据了...",
						icon: "none"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.album_scroll_view {
		height: calc(100vh - 36px);
	}

	.album_swiper {
		swiper {
			height: 278rpx;

			image {
				height: 100%;
			}

			border-radius: 10rpx;
		}
	}

	.album_list {
		padding: 10rpx;
		display: flex;
		flex-wrap: wrap;
		background-color: #C8C7CC;

		.album_item {
			justify-content: space-between;
			align-items: center;
			border-radius: 10rpx;
			padding: 10rpx;
			background-color: #FFFFFF;
			border: 5rpx solid #C0C0C0;
			width: 50%;
			height: 100%;

			.album_img {
				padding: 10rpx;

				image {
					width: 315rpx;
					height: 200rpx;
				}
			}
		}
	}
</style>
